<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
<button onclick="connect()">连接</button>
<button onclick="disConnect()">断开</button>

<h1 id="cur"></h1>
<ul id="msg">
</ul>

<textarea id="sendValue" rows="10" cols="30">
</textarea>

<button onclick="send()">发送</button>
<script>
	function id(el){
		return document.getElementById(el);
	}
	
	var msgDiv = id('msg');
	var stompClient = null;
	function connect(){
		var socket = new SockJS("/mysocket");
		stompClient = Stomp.over(socket);
		stompClient.connect({},function(frame){
			
			console.log(frame);
			stompClient.subscribe('/topic/send',function(msg){
				msgDiv.innerHTML += `<li>${msg.body}</li>`;
			});
			
			stompClient.subscribe('/topic/ping',function(msg){
				console.log(msg);
				id('cur').innerText = msg.body;
			});
			
		});
	}
	
	function disConnect(){
		if(stompClient){
			stompClient.disconnect();
		}
	}
	
	function send(){
		var sendValue = id('sendValue');
		stompClient.send('/app/send',{},JSON.stringify({msg:sendValue.value}));
	}
	
	
</script>

</body>
</html>